<template>
  <el-container>
    <el-header height="90px">
      <el-avatar shape="square" :size="80" fit="fill" >
        <img src="./assets/logo.png" />
      </el-avatar>
    </el-header>
    <el-container>
      <el-aside>
        <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect" router>
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/about">关于</el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
    <el-footer>
      <el-link href="https://beian.miit.gov.cn" target="_blank">闽ICP备20005682号-1</el-link>
    </el-footer>
  </el-container>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: '/'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style>
#app {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

</style>
